<!-- 表单填写 -->
<template>
	<div class="app-container" >
		<el-row :gutter="10" class="mb8" >
			<el-col :span="1.5" style="margin-left: 5px;">
				<el-button type="primary"  icon="el-icon-plus" size="mini" @click="toAdd"  v-hasPermi="['file:fileEntry:add','file:fileEntry:submit']"
					>新增</el-button>
			</el-col>
		</el-row>

		<el-card>
		<div class="main">
		  <el-table class="table" :data="tableData" style="margin-left:5px; width: 1300px"
					max-height="400" :stripe="true" :border="true">
					<el-table-column fixed type="index" label="序号" width="100" header-align="center" align="center"/>
					<el-table-column 	prop="formName"	label="定制化表单名称"	width="200"	/>
					<el-table-column  prop="type"		label="退役军人类型"		width="180"		>
						<template v-slot="scope">
							{{ scope.row.type === '0' ? '退役军人' : '其他优抚对象' }}
						</template>
					</el-table-column>

			  <el-table-column prop="icase"  label="表单模块"  width="220"  >
          <template v-slot="scope">
            <template v-if="scope.row.icase === '1'">
              基本信息
            </template>
            <template v-else-if="scope.row.icase === '2'">
              组织生活、社会活动信息
            </template>
            <template v-else-if="scope.row.icase === '3' && formData.type === 0">
              服役信息
            </template>
            <template v-else-if="scope.row.icase === '4'">
              安置信息
            </template>
            <template v-else-if="scope.row.icase === '5'">
              就业创业信息
            </template>
            <template v-else-if="scope.row.icase === '6' && formData.type === 0">
              教育培训情况
            </template>
            <template v-else-if="scope.row.icase === '7'">
              抚恤优待信息
            </template>
            <template v-else-if="scope.row.icase === '8'">
              褒扬激励信息
            </template>
            <template v-else-if="scope.row.icase === '9'">
              帮扶援助信息
            </template>
			<template v-else-if="scope.row.icase === '10'">
			  市级自定义
			</template>
          </template>

        </el-table-column>

              <el-table-column  prop="createdTime"  label="创建时间"   width="180"  />
              <el-table-column  prop="status"  label="状态"  align="center"  width="180">
                <template v-slot="scope">
                  <el-switch v-model="!!scope.row.status" @change="updateStatus(scope.row)"></el-switch>
                </template>
              </el-table-column>
              <el-table-column   label="操作"  align="center"   width="198"  >
                <template v-slot="scope">
                  <el-button  type="text" size="mini" icon="el-icon-edit" @click="toLook(scope.row)">查看/编辑</el-button>
                </template>
              </el-table-column>
            </el-table>


          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="query.pageNum"
            :limit.sync="query.pageSize"
            @pagination="getTemplateInfo"
			style="margin-left: 500px;"
          />
        </div>
		</el-card>
    </div>
</template>
<script>

// import { addTemplate } from '@/api/workflow/form'
// import { getTemplateCodeList, getTemplateInfo, updateDefaultTemplate } from '@/api/jdlk/template/request'
//
// import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
// import {getUserInfo , getDept} from "@/api/jdlk/utils"
export default {

  components: {},
  props: [],
  dicts: ['county_plate_type'],
  data() {
    return {
		show: false,
      total: 0,
      query: {
        pageSize: 10,
        pageNum: 1
      },
      tableData: [],
      templateData: [
        '标准版',
        '定制化'
      ],

      formData: {
        selected: undefined,
		areaId: undefined,
        type: 0,
        templateType: '定制化',
        icase: undefined
      },
      selected: '',
      labelKeys: {},

	  rules: {
	    area: [{
	      required: true,
	      message: "区域板块不能为空",
	      trigger: "change"
	    }],
	    type: [{
	      required: true,
	      message: "退役军人类型不能为空",
	      trigger: "blur"
	    }],
		icase: [{
	      required: true,
	      message: "表单模块不能为空",
	      trigger: "blur"
	    }],
	  }
    }
  },
  computed: {},
  watch: {
    'formData.selected': {
      async handler() {
        await this.getTemplateInfo()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
	  indexMethod(index) {
	      return (this.query.pageNum - 1) * this.query.pageSize + index + 1;
	  },
    save() {
      const areaId = this.labelKeys[this.formData.selected]
      addTemplate({ ...this.formData, areaId }).then(() => {
        this.$modal.msgSuccess('保存成功.')
      })
    },
    async getTemplateInfo() {
      const areaId = this.labelKeys[this.formData.selected]
      if (!areaId) return
	  this.formData.areaId = areaId

      // const res = await getTemplateInfo({ areaId })
      // this.formData.templateType = res.data.templateType
      // this.formData.type = res.data.type
      if (this.formData.templateType === '定制化') {
        await this.getTemplateInfoList(areaId)
      }
    },
    async getTemplateInfoList() {
      const areaId = this.labelKeys[this.formData.selected]
      if (!areaId || !(this.formData.templateType === '定制化')) return
      const res = await getTemplateCodeList({ areaId, ...this.query })
      this.tableData = res.rows
      // console.log(this.tableData)
      this.total = res.total
    },

    toAdd() {
		this.$refs["formData"].validate(valid => {
		  if (valid) {
			  if(this.formData.icase == undefined) {
				  this.$modal.msgError("表单模块不能为空.");
				  return;
			  }
			  if(! this.show) {
					const areaId = this.formData.selected;
					localStorage.setItem('customize-data', JSON.stringify({ ...this.formData, areaId }))

			  }
			  else {
				const areaId = this.labelKeys[this.formData.selected]
				localStorage.setItem('customize-data', JSON.stringify({ ...this.formData, areaId }))

			}
			//this.formData.areaId = areaId
				// localStorage.setItem('customize-data', JSON.stringify({ ...this.formData, areaId }))
				// this.$router.push('examine/design')
				this.$router.push('/tool/build/index')
		}
		})
    },
    async updateStatus(row) {
      // console.log(row)
      await updateDefaultTemplate({ templateId: row.formId })
      row.status = row.status === 1 ? 0 : 1
      this.$forceUpdate()
    },
    toLook(row) {
		if(! this.show) {
			const areaId = this.formData.selected;
			localStorage.setItem('customize-data', JSON.stringify({ ...this.formData, areaId,row }))

		}
		else {
			const areaId = this.labelKeys[this.formData.selected]
			localStorage.setItem('customize-data', JSON.stringify({ ...this.formData, areaId,row }))

		}
      // const areaId = this.labelKeys[this.formData.selected]
      // localStorage.setItem('customize-data', JSON.stringify({ ...this.formData, areaId,row }))
      // this.$router.push('examine/design')
	  this.$router.push('/tool/build/index')
    },
    onDictReady(dict) {
      this.formData.selected = dict.type?.['county_plate_type']?.[0].label
      if (dict.type?.['county_plate_type']?.length) {
        this.labelKeys = dict.type['county_plate_type'].reduce((a, b) => {
          a[b.label] = b.value
          return a
        }, {})
      }
    },

	getList(){
		var userName=this.$store.state.user;
		console.log(userName)
		this.show = checkRole(['cityadmin']);
		getUserInfo().then(response => {
			  var user = response.data;
			  console.log(user)
			  if(checkRole(['districtadmin'])) {
				  var deptId= user.deptId;
				  getDept(deptId).then(response => {
					  this.formData.selected = response.data.parentId;
					 console.log(this.formData.selected);

					 const areaId = this.formData.selected
					 getTemplateCodeList({ areaId, ...this.query }).then(response=>{
						 this.tableData = response.rows
						 console.log(2,this.tableData)
						 this.total = response.total;
					 });
				  });
			  }
		});


	}
  },
  created() {
	this.getList();
  }

}
</script>
<style scoped>
/deep/ .pagination-container .el-pagination  {
  left: 0;
}
</style>
